// 提供一个能够显示 xtx-message 的组件
// 这个函数将来可以：直接导入使用  也可以挂载到vue实例原型上
// import Message from 'Message.js' 使用：Message({type:'error', text: '提示文字'})
// 挂载到vue实例原型上  this.$message({type:'error', text: '提示文字'})

import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// DOM容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
// 定时器标识
let timer = null
export default ({ type, text }) => {
  // 渲染组件
  // 1.导入消息提示组件
  // 2.将消息提示组件编译为虚拟结点（dom结点）
  // vue提供的 createVNode 方能够将组件转换为dom 结点
  // 这个方法有两个参数 createVNode(组件, 属性对象(props))
  const vnode = createVNode(XtxMessage, { type, text })
  // 3.准备一个装载消息提示组件的DOM容器
  // 4.将虚拟结点渲染在容器中
  // render(虚拟结点, 将虚拟结点渲染到哪个DOM容器)
  render(vnode, div)
  // 3s后销毁
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}
